<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>eim base</title>
<link href="/static/ext/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
<link href="/static/css/data-view.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/static/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="/static/ext/ext-all.js"></script>

<link rel="stylesheet" type="text/css" href="/static/ext/plugins/SwfUploadPanel/SwfUploadPanel.css" />
<script type="text/javascript" src="/static/ext/plugins/SwfUploadPanel/SwfUpload.js"></script>
<script type="text/javascript" src="/static/ext/plugins/SwfUploadPanel/SwfUploadPanel.js"></script>

<script language="javascript">
var globalCurrPath = "Lw==";
var globalCurrPathNode = null;
var globalLeftInnerHeight = 0;
var global_url_prefix = "http://10.6.171.50"
Ext.onReady(function(){
	/* *****************************************************************************
	事件处理过程
	***************************************************************************** */
        var callback_afterCreateNewFolder = function(){
            if( !globalCurrPathNode ){
                tree_subfolders.root.reload();
            }else{
                globalCurrPathNode.reload();
            }
        }
        var callback_reloadThumbnailImages = function(){
                // 重新加载缩略图
                thumbnail_view_store.load({params:{ "currpath": globalCurrPath}});
                thumbnail_view_dv.setStore( thumbnail_view_store );
        }
        var callback_afterRenameFolder = function(){
                globalCurrPathNode.parentNode.reload();
        }
        var callback_afterDeleteFolder = function(){
                globalCurrPathNode.parentNode.reload();
        }
	/* *****************************************************************************
	事件处理函数
	***************************************************************************** */

	var handler_pathChange = function(){
		globalCurrPath = this.currpath;
                globalCurrPathNode = this.treeNode;
                tree_subfolders.getSelectionModel().select( this.treeNode );
                callback_reloadThumbnailImages();
	}
	var handler_createFolder = function(){
		Ext.MessageBox.prompt(
			"请输入",
			"新文件夹名称（不能为空）",
			function(btn,txt){
				if(btn=='ok'){
					if(txt==''){
						Ext.MessageBox.alert("注意", "新文件夹名称不能为空！");
					}else{
                                                Ext.Ajax.request({
                                                    url: '/dyn/createSubFolder',
                                                    params: { fpath: globalCurrPath, newFolder: txt },
                                                    success: function ( result, request ){
                                                        callback_afterCreateNewFolder();
                                                        Ext.MessageBox.alert( '成功', result.responseText); 
                                                    },
                                                    failure: function ( result, request) { 
                                                        Ext.MessageBox.alert('失败', result.responseText); 
                                                    },
                                                });
					}
				}
			});
	}
	var handler_deleteFolder = function(){
                if( globalCurrPath == "Lw==" ){
                        Ext.MessageBox.alert("错误", "根目录无法删除！");
                        return;
                }
		Ext.MessageBox.confirm(
			'请确认',
			'你确定要删除当前目录及其下的所有子目录和文件吗？',
			function(btn){
				if(btn=='yes'){
                                        Ext.Ajax.request({
                                            url: '/dyn/deleteFolder',
                                            params: { fpath: globalCurrPath, },
                                            success: function ( result, request ){
                                                callback_afterDeleteFolder();
                                                Ext.MessageBox.alert( '成功', result.responseText); 
                                            },
                                            failure: function ( result, request) { 
                                                Ext.MessageBox.alert('失败', result.responseText); 
                                            },
                                        });				}
			});
	}
	var handler_renameFolder = function(){
                if( globalCurrPath == "Lw==" ){
                        Ext.MessageBox.alert("错误", "根目录无法重命名！");
                        return;
                }
		Ext.MessageBox.prompt(
			"请输入",
			"文件夹的新名称（不能为空）",
			function(btn,txt){
				if(btn=='ok'){
					if(txt==''){
						Ext.MessageBox.alert("注意", "文件夹的新名称不能为空！");
					}else{
                                                Ext.Ajax.request({
                                                    url: '/dyn/renameFolder',
                                                    params: { fpath: globalCurrPath, newName: txt },
                                                    method: 'GET',
                                                    success: function ( result, request ){
                                                        // 重命名成功后，刷新父结点
                                                        callback_afterRenameFolder();
                                                        Ext.MessageBox.alert( '成功', result.responseText); 
                                                    },
                                                    failure: function ( result, request) { 
                                                        Ext.MessageBox.alert('失败', result.responseText); 
                                                    },
                                                });
					}
				}
			});	
	}
	var handler_imageUpload2 = function(){
		var win=new Ext.Window({
			modal: true,
			layout: 'fit',
			width: 500,
			height: 300,
			closeAction: 'hide',
			plain: true,
			title: '图片上传',
		});
		win.show(this);
	}

			var sessionid = null;
			var cookies = document.cookie.split(";");
			Ext.each(cookies, function(cookie) {
				var nvp = cookie.split("=");
				if (nvp[0].trim() == 'sessionid')
					sessionid = nvp[1];
			});
            
        var uploader = new Ext.ux.SwfUploadPanel({
                width: 500,
                height: 300,
                upload_url: global_url_prefix+'/dyn/imageUpload/',
                file_size_limit: 1073741824,
                debug: true,
                flash_url: "/static/ext/plugins/SwfUploadPanel/swfupload_f9.swf",
                single_file_select: false,
                confirm_delete: false,
                remove_completed: true,
                post_params: { "sessionid": sessionid },
        });

        uploader.on('swfUploadLoaded', function() { 
                this.addPostParam( 'fpath', globalCurrPath );
        });
        
        uploader.on('fileUploadComplete', function(panel, file, response){
        });
        
        uploader.on('queueUploadComplete', function() {
                if ( Ext.isGecko ) {
                        console.log("Files Finished");
                } else {
                        alert("Files Finished");
                }
        });
        
        uploader.on('uploadStart', function( file ){
                alert( "hi" );
        });
        
        var handler_imageUpload = function(){
                uploader.addPostParam( "fpath", globalCurrPath );
		var win=new Ext.Window({
			modal: true,
			layout: 'fit',
			width: 500,
			height: 300,
			closeAction: 'hide',
			plain: true,
			title: '图片上传',
                        items: [ uploader, ],
		});
		win.show(this);
        }
        var handler_subFoldersReload = function(){
            tree_subfolders.root.reload();
        }
        var handler_selectionChange = function( obj, node ){
            globalCurrPath = node.id;
            globalCurrPathNode = node;
            var tbar = toolbar_currpaths.getTopToolbar();
            tbar.items.each(function(){
                this.destroy();
            });
            var btns = [];
            while( node != null ){

                var text = node.text;
                if( node.id == 'Lw==' ){
                        text = '首页'
                }
                btns.push({
                        currpath: node.id,
                        treeNode: node,
                        text: text,
                        handler: handler_pathChange,
                });

                
                node = node.parentNode;
            }
            if( btns.length == 0 ){
                btns.push({
                        currpath: "Lw==",
                        treeNode: tree_subfolders.root,
                        text: '首页',
                        handler: handler_pathChange,  
                });
            }
            btns.reverse();
            tbar.addButton( btns );
            
            callback_reloadThumbnailImages();
        }
        var handler_center_resize = function( obj, newWidth, newHeight, oldWidth, oldHeight ){
                try{
                        thumbnail_view.setHeight( newHeight - toolbar_currpaths.getSize()["height"] );
                }catch(err){
                }
        }
        var handler_west_resize = function( obj, newWidth, newHeight, oldWidth, oldHeight ){
                try{
                        tree_subfolders.setHeight( obj.getInnerHeight() - toolbar_folderActions.getSize()["height"] );
                        globalLeftInnerHeight = obj.getInnerHeight();
                }catch(err){
                }
        }
        var handler_folderActions_resize = function( obj ){
                try{
                        tree_subfolders.setHeight( globalLeftInnerHeight - toolbar_folderActions.getSize()["height"] );
                }catch(err){
                }   
        }
	/* *****************************************************************************
	元素定义
	***************************************************************************** */


	var toolbar_folderActions = new Ext.tree.TreePanel({
		title: '工具箱',
		root: new Ext.tree.AsyncTreeNode({
			expanded: true,
			children: [
				{text: '创建文件夹', leaf: true, listeners: {click: handler_createFolder}     },
				{text: '删除文件夹', leaf: true, listeners: {click: handler_deleteFolder}     },
				{text: '重命名',     leaf: true, listeners: {click: handler_renameFolder}     },
				{text: '上传图片',   leaf: true, listeners: {click: handler_imageUpload}      },
                                {text: '刷新',       leaf: true, listeners: {click: handler_subFoldersReload} },
			] 
		}),
		rootVisible: false,
                collapsible: true,
                listeners: {
                        "expand": { fn: handler_folderActions_resize, delay: 100, },
                        "collapse": { fn: handler_folderActions_resize, delay: 100, },
                },
	});

	var tree_subfolders = new Ext.tree.TreePanel({
		title: '目录列表',
		root: new Ext.tree.AsyncTreeNode({
			expanded: true,
                        id: "Lw==",
		}),
                loader: new Ext.tree.TreeLoader({
                    dataUrl: global_url_prefix + '/dyn/subfolders/'
                }),
		rootVisible: true,
                autoScroll: true,
                animate:true,
                containerScroll: true,
                enableDD:false,
	});
        tree_subfolders.getSelectionModel().on({
            "selectionchange": {
                fn: handler_selectionChange,
                scope: this,
                delay: 100,
            }
        });
        var toolbar_currpaths = new Ext.Panel({
                title: '当前路径',
		tbar : [
			{ currpath: 'Lw==', treeNode: tree_subfolders.root, text: '首页', handler: handler_pathChange },
		],
                // collapsible: true, // 如果当前路径可以折叠，需要处理该对象折叠、展开事件，重设缩图列表高度
	});
        var thumbnail_view_store = new Ext.data.JsonStore({
            url: global_url_prefix + '/dyn/xml_getImages/',
            root: 'images',
            fields: [
                'name', 'ori_url', 'thumbnail_url'
            ]
        }); 
        thumbnail_view_store.load();
        
        var thumbnail_view_tpl = new Ext.XTemplate(
            '<tpl for=".">',
                '<div class="thumb-wrap" id="{name}">',
                    '<div class="thumb"><img src="{thumbnail_url}" title="{name}" /></div>',
                    '<span><a href="{ori_url}">{name}</a></span>',
                '</div>',
            '</tpl>',
            '<div class="x-clear"></div>'
        );

        var thumbnail_view_dv = new Ext.DataView({
                store: thumbnail_view_store,
                tpl: thumbnail_view_tpl,
                autoHeight: true,
                autoWidth: true,
                multiSelect: true,
                overClass:'x-view-over',
                itemSelector:'div.thumb-wrap',
                emptyText: '无可显示图片',
                loadingText: '正在生成缩略图......',
        });
        var thumbnail_view = new Ext.Panel({
            id: 'images-view',
            frame: true,
            title: '缩略图',
            autoScroll: true,
            fixedcenter:true,
            layout: 'fit',
            height: 500,
            items: thumbnail_view_dv,
        });
        thumbnail_view.setVisible( true );
        

	/* 主元素 */
	var viewport = new Ext.Viewport({
		layout: 'border',
		items: [{
			region: 'north',
			html: '<h1 class="x-panel-header">Easy Image Manager V0.1 —— www.muyehu.com.cn</h1>',
			autoHeight: true,
			border: false,
			margins: '0 0 5 0',
		},{
			region: 'west',
			width: 200,
			title: '控制面板',
			collapsible: true,
                        margins: '0 0 5 5',
                        split: true,
			items: [ toolbar_folderActions, tree_subfolders, ],
                        listeners: {
                                "resize": { fn: handler_west_resize, delay: 100, },
                        },
		},{
			region: 'center',
			collapsible: false,
			margins:'0 5 5 0',
                        
			items: [ toolbar_currpaths, thumbnail_view, ],
                        listeners: {
                                "resize": { fn: handler_center_resize, delay: 100, },
                        },
		}]
	});
});
</script>
</head>

<body>
        <div id="grid"></div>
</body>
</html>
